<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--
/**
 * @module Polymer Core Elements
 */
/**
 * core-menu-button is a core-icon-button with a drop down menu
 * that allows the user to select an option. The drop down menu is styled with
 * an arrow pointing to the button, and can be positioned to the top or the
 * bottom of the button with the valign property. The valign property aligns
 * the menu to the left or right edge of the button.
 *
 * Example:
 *
 *     <core-menu-button selected="0">
 *       <core-item icon="settings" label="Settings"></core-item>
 *       <core-item icon="dialog" label="Dialog"></core-item>
 *       <core-item icon="search" label="Search"></core-item>
 *     </core-menu-button>
 *
 * @class core-menu-button
 */
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">

<polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
  <template>
    <link rel="stylesheet" href="core-menu-button.css">
    <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
    <core-dropdown id="dropdown" relatedTarget="{{$.button}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}">
      <core-menu selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" on-core-activate="{{closeAction}}">
        <content select="*"></content>
      </core-menu>
    </core-dropdown>
  </template>
  <script src="core-menu-button.js"></script>
</polymer-element>
